/**
* @Description: WoShop商城
* @Author: 梧桐
* @Copyright: 武汉一一零七科技有限公司©版权所有
* @Link: www.wo-shop.net
* @Contact: QQ:2487937004
*/
<template>
	<view class="page">
		
		<image v-for="item in jieshaotou" mode="widthFix" style="width: 100%;" :src="item['ad_pic']"></image>
		<!-- 底部会员特权 -->
		<view class="gradeList">

			<h2 class="vipTitle">{{$t('升级会员,点亮更多权益')}}</h2>
			<view class="listBox">
				<view class="listItem" :class="{active: privilege.returns == 1}">
					<view class="icon">
						<image :src="imgStaticUrl+'/images/rank/icon-vipDay7@2x.png'"></image>
					</view>
					<view class="des f24 c3">{{$t('7折优惠')}}</view>
					<view class="label c9 f26">{{$t('会员专属')}}</view>
				</view>
				<view class="listItem" :class="{active: privilege.customerService == 1}">
					<view class="icon">
						<image :src="imgStaticUrl+'/images/rank/icon-vipCustomer@2x.png'"></image>
					</view>
					<view class="des f24 c3">{{$t('推广奖励')}}</view>
					<view class="label c9 f26">{{$t('会员专属')}}</view>
				</view>
				<view class="listItem" :class="{active: privilege.identification == 1}">
					<view class="icon">
						<image :src="imgStaticUrl+'/images/rank/icon-vip@2x.png'"></image>
					</view>
					<view class="des f24 c3">{{$t('尊享标识')}}</view>
					<view class="label c9 f26">{{$t("会员专属")}}</view>
				</view>
				<view class="listItem" :class="{active: privilege.holidayGift == 1}">
					<view class="icon">
						<image :src="imgStaticUrl+'/images/rank/icon-vipGift@2x.png'"></image>
					</view>
					<view class="des f24 c3">{{$t('节日礼物')}}</view>
					<view class="label c9 f26">{{$t("会员专属")}}</view>
				</view>
				<view class="listItem" :class="{active: privilege.preemptive == 1}">
					<view class="icon">
						<image :src="imgStaticUrl+'/images/rank/icon-Activity@2x.png'"></image>
					</view>
					<view class="des f24 c3">{{$t('抢拍特权')}}</view>
					<view class="label c9 f26">{{$t("会员专属")}}</view>
				</view>
				<view class="listItem" :class="{active: privilege.offlineActivity == 1}">
					<view class="icon">
						<image :src="imgStaticUrl+'/images/rank/icon--vipMark@2x.png'"></image>
					</view>
					<view class="des f24 c3">{{$t('线下活动')}}</view>
					<view class="label c9 f26">{{$t("会员专属")}}</view>
				</view>
			</view>
		</view>
		<view class="payMember">
			<view class="button"  v-if="vip == 1">{{$t('您已尊享会员')}}</view>
			<view class="button"  @click="submitOrder" v-else>{{$t('升级会员')}}</view>
			<pay-pop ref="payPop" :callbackUrl="'/pagesC/Wallet/recharge'" scene="recharge"
				:totalPrice="Number(price).toFixed(2)">
				<view class="pay-btn" @click="$u.throttle(crosspay,1500)">{{$t('确认支付')}}</view>
			</pay-pop>
		</view>
	</view>
</template>

<script>
	let providerList = []; // 支付通道
	let orderInfoData = {};
	import payPop from "@/pagesB/components/payPop";
	export default {
		components: {
			payPop
		},
		data() {
			return {
				active: 0,
				money: '',
				loading1: false,
				loading2: false,
				loading: false,
				price: 296,
				vip: 0,
				payData: '',
				wechatMiniProgram: 1,
				imgStaticUrl: this.STATICURL,
				vipInfo: {},
				isActive: false,
				arrowSrc: '',
				bgList: [{
						color: '#6B696A',
						src: this.STATICURL + 'images/bg-ordinary@2x.png',
						iconsrc: this.STATICURL + 'images/icon-vipOrdinary@2x.png',
						bgIndex: 0,
					}, {
						color: '#5168A3',
						src: this.STATICURL + 'images/bg-silver@2x.png',
						iconsrc: this.STATICURL + 'images/icon-vipSilver@2x.png',
						bgIndex: 1,
					}, {
						color: '#FFB300',
						src: this.STATICURL + 'images/bg-gold@2x.png',
						iconsrc: this.STATICURL + 'images/icon-vipGold@2x.png',
						bgIndex: 2,
					}, {
						color: '#9B5025',
						src: this.STATICURL + 'images/bg-platinum@2x.png',
						iconsrc: this.STATICURL + 'images/icon-vipPlatinum@2x.png',
						bgIndex: 3,
					}, {
						color: '#824EB3',
						src: this.STATICURL + 'images/bg-diamond@2x.png',
						iconsrc: this.STATICURL + 'images/icon-vipDiamond@2x.png',
						bgIndex: 4,
					},
					{
						color: '#824EB3',
						src: this.STATICURL + 'images/bg-silver@2x.png',
						iconsrc: this.STATICURL + 'images/icon-vipDiamond@2x.png',
						bgIndex: 5,
					}
				],
				privilege: {},
				myuserinfo: {},
				wxUserInfo: {},
				myHeadStyle: {},
				cosUrl: '',
				bgheadSrc: '',
				isInviteModelShow: false,
				inviterInfo: {},
				wecode: '',
				avatarUrl: '',
				gender: '',
				nickName: '游客',
				inviterID: '',
				bannerList:[],
				jieshaoList:[],
				jieshaotou:[],
				isLogin: 0, //判断是否登陆
			}
		},

		created() {
			this.getMemberInfo();
		},
		onShow() {
			if (uni.getStorageSync('token')) {
				this.isLogin = 1
			} else {
				this.isLogin = 0
			}
			this.getBannerList();
			this.getMemberInfo();
		},
		onLoad(option) {
			if(option.shareUserId){
				this.$store.commit('setshareUserId', option.shareUserId)
			}
			// #ifdef MP-WEIXIN
			uni.login({
				provider: "weixin",
				success: loginRes => {
					this.wecode = loginRes.code
					console.log(this.wecode);
				},
				fail: (err) => {
					this.$toast(JSON.stringify(err));
				},
			});
			// #endif
		},
		// onShareTimeline(res) {
		// 	if (res.from === 'button') { // 来自页面内分享按钮
		// 		console.log(res.target)
		// 	}
		// 	return {
		// 		title: '曜宇生活',
		// 		path: '/pages/tabBar/qiye?shareUserId='+this.$store.state.userId
		// 	}
		// },
		computed: {

			getRankNum() {
				let rankNum = parseInt(this.vipInfo.rank);
				return rankNum + 1;
			},
			getBgSrc() {
				let rankNum = parseInt(this.vipInfo.rank);
				return this.bgList[rankNum];

			}
		},
		methods: {
			getMemberInfo() {
				this.$http.getUserInfo().then(res => {
					this.vipInfo = res.data;
					console.log(this.vipInfo)
					this.privilege = this.vipInfo.privilege;
					this.getRankNum;
					this.getBgSrc;
					this.vip = this.vipInfo.vip;
				})
			},
			getBannerList() {
				// 企业介绍
				const data = {
					tag: 'mobile_pintuan_banner'
				}
				this.$http.getAdByTag(data).then(res => {
					if(res.status == 200){
						this.jieshaotou = res.data
					}
				})
			},
			priceChange(e) {
				this.price = e.detail.value;
				console.log(e.detail.value)
			},
			orderInfo(index) {
				return new Promise(reslove => {
					this.$http.getPrePayOrder({
						price: this.price
					}).then(res => {
						if (res.status == 200) {
							reslove(res);
							this.$refs.payPop.payModel = true
						} else {
							this.$toast(res.mess);
						}
					});
				});
			},
			async submitOrder() {
				console.log(this.isLogin)
				if (this.isLogin !== 1) {
					// #ifndef MP-WEIXIN
					this.$navigateTo('/pagesB/login/login')
					// #endif
					// #ifdef MP-WEIXIN
					// this.$navigateTo('/platforms/mp-weixin/miniLogin')
					this.wechatLogin()
					// #endif
					return;
				}
				
				if (this.price <= 0) {
					this.$toast(this.$t('请输入充值金额'));
					return false;
				}
				orderInfoData = await this.orderInfo()
			},
			
			// 生成拉起支付的密钥
			payFall(paydata, zf_type) {
				let data = {
					order_number: paydata.data.order_number,
					zf_type: zf_type,
					wechat_miniprogram: this.wechatMiniProgram,
					h5: this.h5,
					scene: 'recharge'
				}
				if (this.wechatMiniProgram == 1) {
					data.xcx_openid = uni.getStorageSync('xcxOpenid')
				}
				return new Promise(resolve => {
					this.$http.getzhifu(data)
						.then(res2 => {
							console.log(res2)
							if (res2.status == 200) {
								resolve(res2);
							}
						})
				});
			},
			async crosspay() {
				let ref = this.$refs.payPop
			
				if (ref.payType == 5) { // 银行卡支付
					ref.orderNumber = orderInfoData.data.order_number
					ref.bankModel = true
					return
				} else if (ref.payType == 3) { // 余额支付
					ref.orderNumber = orderInfoData.data.order_number
					ref.hasPayPwd()
				} else { // 支付宝、微信支付
					const temp = await this.payFall(orderInfoData, ref.payType);
					ref.payinfos = await temp.data.infos
					ref.crosspay()
				}
			
				this.$hideLoading()
			},
			
			getWallet() {
				this.$http.getWallet().then(res => {
					if (res.status == 200) {
						this.money = res.data.money
					}
				})
			},
			// #ifdef MP-WEIXIN
			// 微信小程序登录   code换区 小程序openid 和 session_key
			getOpenID() {
				return new Promise((resolve) => {
					this.$http.getWechatMiniProgramOpenid({
						code: this.wecode
					}).then(res => {
						resolve(res.data)
			
					});
				})
			},
			async wechatLogin() {
				this.inviterID = this.inviterInfo && this.inviterInfo.id
				const {openid='',session_key='',unionid=''} = await this.getOpenID()
				uni.setStorageSync('xcxOpenid', openid); //存取小程序openid
				uni.setStorageSync('xcxSessionKey', session_key);
				this.asyncUserInfo(openid, unionid);
				this.isInviteModelShow = false;
			
			},
			asyncUserInfo(openid = '', unionid = '') {
				if (openid == '') {
					return false;
				}
				this.$http.thirdLogin({
					oauth: 'weixin_mp',
					openid: openid,
					unionid: unionid,
					nick_name: this.nickName,
					uniongender: this.gender,
					iconurl: this.avatarUrl,
					inviter: this.inviterID
				}).then(result => {
					this.$toast(result.status)
					console.log(result)
					if (result.status == 200) {
						this.$store.commit('loginStatus', true)
						uni.setStorageSync('token', result.data.token);
						uni.setStorageSync('identity', result.data.identity);
						uni.setStorageSync('role', result.data.role);
						uni.setStorageSync('role_id', result.data.shop_id);
						uni.closeSocket({
							success() {
								console.log('socket关闭成功');
							},
							fail(res) {
								console.log(res);
							}
						})
						this.isLogin = 1;
						this.$toast('登录成功');
						setTimeout(() => {
							this.im();
							uni.reLaunch({
							      url: '/pagesB/member/member' // 假设当前页面是index页面
							});
						}, 500);
						
					}
					if (result.status == 400 || result.data.info == 'unregister') {
						console.log(result)
						this.$u.route({
							url: 'platforms/mp-weixin/miniLogin',
							params: {
								oauth: 'weixin_mp',
								openid: openid,
								unionid: unionid,
								nick_name: this.nickName,
								uniongender: this.gender,
								iconurl: this.avatarUrl,
								inviter: this.inviterID,
							}
						});
					}
				})
			}
			// #endif

		},
		onNavigationBarButtonTap() {
			this.getnav('/pagesB/article/detail?title='+this.$t('会员等级规则'));
		}
	}
</script>

<style lang="less">
	page {
		background: #fff;
	}

	.page {
		.bg {
			width: 750upx;
			height: 266upx;
			background-image: #333;
			background-size: cover;

		}

		.userInfo {
			padding: 0 32upx;
			position: relative;
			margin-top: -142px;
			height: 500rpx;

			.infoBg {
				width: 100%;
				height: 380upx;
				position: relative;
				background-size: cover;
				color: #fff;
				text-align: center;
				display: flex;
				flex-direction: column;
				padding-top: 80upx;
				align-items: flex-start;
				z-index: 2;

				.vipInfo-name {
					font-size: 38upx;
					font-weight: 500;
					margin: 40upx 40upx 0;

					.user-name {
						font-size: 28upx;
						font-weight: 400
					}
				}

				.bgWrap {
					position: absolute;
					width: 100%;
					height: 100%;
					z-index: -1;
				}

				.avatar {
					width: 120upx;
					height: 120upx;
					border: 4upx solid rgba(255, 255, 255, 0.4);
					border-radius: 50%;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.name {
					line-height: 40upx;
					margin-top: 27upx;
				}

				.points {
					margin-top: 8upx;
					margin-left: 40upx;
					line-height: 33upx;
				}
			}
		}

		.grade {
			padding: 0 32upx;
			width: 100%;

			.box {
				display: flex;
				margin-top: 90upx;
				align-items: center;

				.icon-vipsrc {
					width: 58upx;
					height: 42upx;
					margin: 0 8upx;
				}

				.progress {
					flex: 0 0 600upx;
					height: 6upx;
					background: rgba(216, 216, 216, 0.5);
					border-radius: 3px;

					.innerBox {
						height: 100%;
						width: 20%;
						background: rgba(235, 123, 24, 1);
						border-radius: 3upx;
						position: relative;

						.bubble {
							position: absolute;
							line-height: 33upx;
							font-size: 24upx;
							background: rgba(216, 216, 216, 1);
							color: #666;
							padding: 4upx 6upx;
							border-radius: 10upx;
							right: -43upx;
							top: -60upx;

							&::after {
								content: '';
								width: 0;
								height: 0;
								display: inline-block;
								border: 15upx solid transparent;
								border-top: 15upx solid rgba(216, 216, 216, 1);
								bottom: -23upx;
								left: 50%;
								transform: translate(-50%, 0);
								position: absolute;
							}

						}
					}
				}

				.gradebox {
					flex: 1;
					height: 36upx;
					background: #EEEEEE;
					align-items: center;
					display: flex;
					justify-content: space-between;

					.vip {
						width: 60upx;
						height: 50upx;
					}
				}
			}

			.descripe {
				display: flex;
				justify-content: space-between;
				margin-top: 18upx;

				text {
					color: #ffff;
				}
			}

		}

		.gradeList {
			padding-top: 33upx;
			border-top: 20upx solid rgba(248, 248, 248, 1);
			padding-bottom: 250upx;

			.title {
				line-height: 50upx;
				font-size: 36upx;
				color: #2B2B2B;
				display: flex;
				justify-content: space-between;

				.seerules {
					font-size: 28upx;
					color: #999999;
					display: flex;
					align-items: center;

					.arrowRight {
						width: 28upx;
						height: 28upx;
						display: inline-block;
					}
				}
			}

			.vipTitle {
				font-size: 36upx;
				text-align: center;
				padding: 0 30upx 30upx;
			}

			.listBox {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				.listItem {
					margin-bottom: 50upx;
					display: flex;
					justify-content: center;
					width: 250upx;
					flex-direction: column;
					align-items: center;
					filter: opacity(0.8) grayscale(100%);

					&.active {
						filter: opacity(1) grayscale(0);
					}

					.icon {
						width: 94upx;
						height: 94upx;

						image {
							width: 100%;
							height: 100%;
						}

					}

					.des {
						line-height: 33upx;
						margin-top: 16upx;
					}

					.label {
						line-height: 37upx;
						margin-top: 8upx;
					}
				}
			}

		}
		.payMember{
			position: fixed;
			width: 100%;
			bottom: 20upx;
			.button {
				margin: 20upx 32upx 32upx;
				height: 88upx;
				font-size: 32upx;
				background-image: linear-gradient(to right, rgb(255, 164, 104), rgb(250, 63, 63));
			}
			
			.rmbLogo {
				font-size: 40upx;
			}
			
			button {
				background-color: #FB403F;
				border-radius: 50upx;
			
				color: #ffffff;
			}
			
			.uni-h1.uni-center {
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: flex-end;
			}
			
			.price {
				border-bottom: 1px solid #eee;
				width: 200upx;
				height: 50upx;
				padding-bottom: 4upx;
				text-align: center;
			}
			
			.ipaPayBtn {
				margin-top: 30upx;
			}
			
			.paytype {
				margin-bottom: 15rpx;
				background-image: linear-gradient(to right, rgb(255, 164, 104), rgb(250, 63, 63));
			}
		}
	}
</style>
